<template>
    <div class="container">
        <div class="company-primary-detail-edit">
            <header>
                <router-link to="/">首页 / </router-link>
                <router-link :to="{ path: '/partner/company', query: { id: id }}">企业管理 / </router-link>
                <router-link :to="{ path: '/partner/companyDetail', query: { id: id }}">{{name?name:'--'}}/ </router-link>
                基础信息
            </header>
            <div v-if="messageList.length > 0" class="focus-pointer mb30">
                <div v-if="messageList.length > 0" class="flex-box-align" style="padding-left: 18px; position: relative; width: 100%;">
                    今日要事：
                    <div class="message">
                        <ul class="marquee_list" :style="{ top: -num + 'px'}" :class="{marquee_top:num}">
                            <li v-for="(item, index) in messageList" :key="index" v-if="messageList && messageList.length">
                                <router-link :to="{name: item.route}">{{item.showMsg}}</router-link>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="detail-display">
                <div class="flex-box-align head-sec">
                    <div class="flex">基础信息</div>
                    <el-button type="primary" style="background-color: #ED7018;border-color: #ED7018;" @click="handleClickCommit">提交</el-button>
                </div>
                <el-form :model="params" :rules="rules" ref="params" style="margin-top: 30px;">
                    <div class="flex-box-justify" style="padding-top: 30px;">
                        <div class="flex" style="margin-right: 40px;">
                            <el-form-item label="企业名称" prop="coreData.companyName">
                                <div class="flex-box-align whiteSpace">
                                    <el-input v-model="params.coreData.companyName" placeholder="请输入内容"></el-input>
                                </div>
                            </el-form-item>
                            <!-- <el-form-item label="所属行业" prop="coreData.firstIndustry">
                                <div class="flex-box-align whiteSpace">
                                    <el-cascader
                                            :options="firstIndustryList"
                                            v-model="selectedOptions"
                                            :props="props"
                                            @change="handleChange">
                                    </el-cascader>
                                </div>
                            </el-form-item> -->
                            <el-form-item label="注册成立日期" prop="coreData.regdate">
                                <div class="flex-box-align whiteSpace">
                                    <el-date-picker
                                            v-model="params.coreData.regdate"
                                            type="date"
                                            placeholder="选择日期">
                                    </el-date-picker>
                                </div>
                            </el-form-item>
                            <el-form-item style="display: none;" label="注册所在地" prop="licenceData.regDistrictCode">
                                <div class="flex-box-align whiteSpace">
                                    <v-distpicker :province="province" :city="city" :area="district"
                                                  @province="selectProvince"
                                                  @city="selectCity"
                                                  @area="selectArea"
                                    ></v-distpicker>
                                </div>
                            </el-form-item>
                            <el-form-item label="注册资金" prop="coreData.regMoney">
                                <div class="flex-box-align whiteSpace">
                                    <el-input v-model="params.coreData.regMoney" placeholder="请输入内容"></el-input>
                                </div>
                            </el-form-item>
                            <el-form-item label="营业执照复印件" prop="licenceData.licenceFileId">
                                <div class="flex-box-container whiteSpace">
                                    <el-upload
                                            class="avatar-uploader"
                                            :action="uploadUrl"
                                            :show-file-list="false"
                                            :on-success="handleAvatarSuccess">
                                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                </div>
                            </el-form-item>
                        </div>
                        <div class="flex">
                            <el-form-item label="社会统一信用号" prop="licenceData.unifiedCreditNumber">
                                <div class="flex-box-align whiteSpace">
                                    <el-input v-model="params.licenceData.unifiedCreditNumber" placeholder="请输入内容"></el-input>
                                </div>
                            </el-form-item>
                            <el-form-item label="法定代表人" prop="licenceData.legalCardId">
                                <div class="flex-box-align whiteSpace">
                                    <el-input v-model="params.licenceData.legalCardId" placeholder="请输入内容"></el-input>
                                </div>
                            </el-form-item>
                            <el-form-item label="实际控制人" prop="licenceData.actualCardId">
                                <div class="flex-box-align whiteSpace">
                                    <el-input v-model="params.licenceData.actualCardId" placeholder="请输入内容"></el-input>
                                </div>
                            </el-form-item>
                            <el-form-item label="注册地址" prop="licenceData.regDistrictCode">
                                <div class="flex-box-align address-input whiteSpace">
                                    <v-distpicker :province="province" :city="city" :area="district"
                                                  @province="selectProvince"
                                                  @city="selectCity"
                                                  @area="selectArea"
                                    ></v-distpicker>
                                    <el-form-item prop="licenceData.regAddress">
                                        <el-input v-model="params.licenceData.regAddress" placeholder="请输入内容" ></el-input>
                                    </el-form-item>
                                </div>
                            </el-form-item>
                            <el-form-item label="经营地址" prop="licenceData.runRegDistrictCode">
                                <div class="flex-box-align address-input whiteSpace">
                                    <v-distpicker :province="runProvince" :city="runCity" :area="runDistrict"
                                                  @province="selectRunProvince"
                                                  @city="selectRunCity"
                                                  @area="selectRunArea"
                                    ></v-distpicker>
                                    <el-form-item prop="licenceData.runRegAddress">
                                        <el-input v-model="params.licenceData.runRegAddress" placeholder="请输入内容" ></el-input>
                                    </el-form-item>
                                </div>
                            </el-form-item>
                            <el-form-item label="企业员工人数" prop="licenceData.companyPeople">
                                <div class="flex-box-align whiteSpace">
                                    <el-input v-model.number="params.licenceData.companyPeople" placeholder="请输入内容"></el-input>
                                </div>
                            </el-form-item>
                            <el-form-item label="高层管理人员说明" prop="licenceData.contactDatas">
                                <div class="flex-box-container">
                                    <div>
                                        <div class="top-manager">
                                            <span>姓名</span>
                                            <span>年龄</span>
                                            <span>职位</span>
                                            <span>简历介绍</span>
                                        </div>
                                        <ul>
                                            <li class="whiteSpace" style="margin-bottom: 20px;" v-for="(item, index) in params.licenceData.contactDatas" :key="index">
                                                <el-input v-model="item.trueName" placeholder="请输入内容" style="width: 80px"></el-input>
                                                <el-input v-model.number="item.age" placeholder="请输入内容" style="width: 80px"></el-input>
                                                <el-select filterable v-model="item.position" placeholder="请选择" style="width: 80px">
                                                    <el-option
                                                            v-for="item1 in positionList"
                                                            :key="item1.key"
                                                            :label="item1.value"
                                                            :value="item1.key">
                                                    </el-option>
                                                </el-select>
                                                <el-input v-model="item.introduction" placeholder="请输入内容" style="width: 150px"></el-input>
                                            </li>
                                            <el-button @click="handleClickAdd">添加</el-button>
                                        </ul>
                                    </div>
                                </div>
                            </el-form-item>
                            <el-form-item label="所属推荐机构" prop="baseData.parentChannelCode">
                                <div class="flex-box-align whiteSpace">
                                    <el-select filterable v-model="params.baseData.parentChannelCode" @change="handleChangeChannel" placeholder="请选择">
                                        <el-option
                                                v-for="item in channelList"
                                                :key="item.channelCode"
                                                :label="item.companyName"
                                                :value="item.channelCode"
                                        >
                                        </el-option>
                                    </el-select>
                                </div>
                            </el-form-item>

                        </div>
                    </div>
                </el-form>
            </div>

        </div>
    </div>
</template>

<script>
    import {parseUrlParams} from "../../util";
    let CONSTANT = require('../../constant/constant.js'),
        common = require('../../common.js');
    import VDistpicker from 'v-distpicker';

    export default {
        data() {
            var validateCard =  (rule, value, callback) => {
                var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
                if (!reg.test(value)){ return callback(new Error('证件输入不合法')); }
                return callback();
            };
            var validateCode =  (rule, value, callback) => {
                if (!common.checkSocialCreditCode(value)) return callback(new Error('社会统一信用号输入不合法'))
                return callback();
            };
            var validateNum =  (rule, value, callback) => {
                if (isNaN(value)){ return callback(new Error('请输入数字')); }
                var reg = /^(-?\d+)(\.\d{1,2})?$/;
                if (!reg.test(value)){ return callback(new Error('请保留两位小数')); }
                return callback();
            };
            var selectedOption = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('年龄不能为空'));
                } else {
                    return callback()
                }
            };
            var contactDatas = (rule, value, callback) => {
                value.map( (item, index) => {
                    for (var i in item) {
                        if (!item[i]) {
                            return callback(new Error('高层管理人员说明不能为空'));
                        }
                    }
                })
                return callback()
            };

            var imgUrl = (rule, value, callback) => {
            };

            return {
                province: "",
                city: "",
                district: "",
                runProvince: "",
                runCity: "",
                runDistrict: "",
                imageUrl: require("../../images/upload-default.png"),

                rules: {
                    // "coreData.companyName": [
                    //     {required: true, message: '请输入企业名称', trigger: 'change'}
                    // ],
                    // "coreData.firstIndustry": [
                    //     {validator: selectedOption, required: true, message: '请选择所属行业', trigger: 'blur'}
                    // ],
                    // "coreData.regdate": [
                    //     {required: true, message: '请选择注册成立日期', trigger: 'change'}
                    // ],
                    // "licenceData.regDistrictCode": [
                    //     {required: true, message: '请选择注册所在地', trigger: 'change'}
                    // ],
                    // "licenceData.licenceFileId": [
                    //     {required: true, message: '请上传营业执照复印件', trigger: 'change'},
                    // ],
                    // "licenceData.unifiedCreditNumber": [
                    //     {required: true, message: '请输入社会统一信用号', trigger: 'change'},
                    //     {  validator: validateCode, trigger: 'blur' }
                    // ],
                    // "licenceData.legalCardId": [
                    //     {required: true, message: '请输入法定代表人', trigger: 'change'},
                    // ],
                    // "licenceData.actualCardId": [
                    //     {required: true, message: '请输入实际控制人', trigger: 'change'},
                    // ],
                    // "licenceData.regAddress": [
                    //     {required: true, message: '请选择/输入注册地址', trigger: 'change'}
                    // ],
                    // "licenceData.runRegDistrictCode": [
                    //     {required: true, message: '请选择/输入经营地址', trigger: 'change'}
                    // ],
                    // "licenceData.runRegAddress": [
                    //     {required: true, message: '请选择/输入经营地址', trigger: 'change'}
                    // ],
                    // "licenceData.companyPeople": [
                    //     {required: true, message: '请输入企业员工人数', trigger: 'change'},
                    //     {  validator: validateNum, trigger: 'blur' }
                    // ],
                    // "licenceData.contactDatas": [
                    //     {validator: contactDatas, required: true, message: '请输入高层管理人员说明', trigger: 'blur'}
                    // ],
                    // "baseData.parentChannelCode": [
                    //     {required: true, message: '请选择所属推荐机构', trigger: 'change'}
                    // ],
                },
                params: {
                    baseData: {
                        parentChannelCode: "",
                        userId: ""
                    },
                    coreData: {
                        companyName: "",
                        firstIndustry: "",
                        secondIndustry: "",
                        thirdIndustry: "",
                        regdate: "",
                        regMoney: ""
                    },
                    licenceData: {
                        regProvinceCode: "",
                        regCityCode: "",
                        regDistrictCode: "",
                        unifiedCreditNumber: "",
                        legalCardId: "",
                        actualCardId: "",
                        regAddress: "",
                        runProvinceCode: "",
                        runRegCityCode: "",
                        runRegDistrictCode: "",
                        runRegAddress: "",
                        companyPeople: "",
                        contactDatas: [
                            {
                                age: "",
                                trueName: "",
                                position: "",
                                introduction: "",
                            }
                        ],
                        licenceFileId: ""
                    },
                },

                props: {
                    label: "value",
                    value: 'key',
                    children: 'childs'
                },
                name:'',
                id:'',
                selectedOptions: [],
                firstIndustryList: [],
                secondIndustryList: [],
                positionList: [],
                channelList: [],
                uploadUrl: "",
                num: 0,
                messageList: []
            }
        },
        mounted(){
            this.getMessage()
            setInterval( () => {
                this.getMessage()
            }, 120000)
            this.id = this.$router.currentRoute.query.id;
            this.name = this.$router.currentRoute.query.name;
            this.uploadUrl = CONSTANT.URL.SYS.ADMINUPLOAD + "?sessionId="+common.getCookie("sessionId");

            this.getDictionary("first_industry", (data) => {
                this.firstIndustryList = data.data.bussData
            })
            this.getDictionary("position", (data) => {
                this.positionList = data.data.bussData
            })
            this.getUserType("channel", "", (data) => {
                this.channelList = data.data.bussData
            })

            if (parseUrlParams("id")) {
                this.getDetail()
            }


        },
        components: {
            VDistpicker
        },
        methods:{
            getMessage() {
                let url = CONSTANT.URL.CALENDAR.MESSAGELIST;
                common.requestAjax(url, {}, {}, (data) => {
                    if(data.status == 200) {
                        this.messageList = data.data.bussData;
                        this.showMarquee(this.num)
                    }
                })
            },
            getDetail() {
                let url = CONSTANT.URL.COMPANY.COMPANYBASEDETAIL
                common.requestAjax(url, JSON.stringify({}), {userId: parseUrlParams("id")}, (data) => {
                    if (data.status == 200) {
                        this.params.coreData = data.data.bussData.coreData;
                        this.params.baseData = data.data.bussData.baseData;
                        this.params.licenceData = data.data.bussData.licenceData ? data.data.bussData.licenceData : this.params.licenceData
                        this.selectedOptions = [data.data.bussData.coreData.firstIndustry, data.data.bussData.coreData.secondIndustry]
//                        this.province = this.params.coreData.regProvinceName;
//                        this.city = this.params.coreData.regCityName;
//                        this.district = this.params.coreData.regDistrictName
                        this.imageUrl = data.data.bussData.licenceData && data.data.bussData.licenceData.licenceFileInfo ? data.data.bussData.licenceData.licenceFileInfo.fileUrl : "";
                        this.province = this.params.licenceData && this.params.licenceData.regProvinceName ? this.params.licenceData.regProvinceName : ""
                        this.city = this.params.licenceData && this.params.licenceData.regCityName ? this.params.licenceData.regCityName : '';
                        this.district = this.params.licenceData && this.params.licenceData.regDistrictName ? this.params.licenceData.regDistrictName : '';
                        this.runProvince = this.params.licenceData && this.params.licenceData.runProvinceName ? this.params.licenceData.runProvinceName : ''
                        this.runCity = this.params.licenceData && this.params.licenceData.runRegCityName ? this.params.licenceData.runRegCityName : '';
                        this.runDistrict = this.params.licenceData && this.params.licenceData.runRegDistrictName ? this.params.licenceData.runRegDistrictName : ''
                    }
                })
            },
            getUserType(params, secondParams, callback) {
                let url = CONSTANT.URL.COMPANY.USERTYPE;
                common.requestAjax(url, JSON.stringify({userType: params, capitalType: secondParams}), {}, callback)
            },
            getDictionary(params, callback) {
                let url = CONSTANT.URL.SYS.LOADDICTIONARY;
                common.requestAjax(url, {codeType: params}, {}, callback);
            },
            selectProvince(val) {
                this.province = val.value
                this.params.licenceData.regProvinceCode = val.code
            },
            selectCity(val) {
                this.city = val.value
                this.params.licenceData.regCityCode = val.code
            },
            selectArea(val) {
                // this.district = val.value
                this.params.licenceData.regDistrictCode = val.code
            },
            selectRunProvince(val) {
                this.params.licenceData.runProvinceCode = val.code
            },
            selectRunCity(val) {
                this.params.licenceData.runRegCityCode = val.code
            },
            selectRunArea(val) {
                this.params.licenceData.runRegDistrictCode = val.code
            },
            handleAvatarSuccess(res, file) {
                this.params.licenceData.licenceFileId = res.data.bussData.fileId
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            handleClickCommit() {
                this.$refs["params"].validate((valid) => {
                    if (valid) {
                        let url = CONSTANT.URL.COMPANY.SAVEBASEDETAIL;
                        if (!parseUrlParams("id")) {
                            this.params.baseData = {
                                parentChannelCode: this.params.baseData.parentChannelCode
                            }
                        } else {
                            this.params = Object.assign(this.params, {userId: parseUrlParams("id")})
                        }
                        if (parseUrlParams("from")) {
                            this.params.coreData.userType = parseUrlParams("from")
                        }
                       common.requestAjax(url, JSON.stringify(this.params), {}, (data) => {
                           if(data.status == 200) {
                               this.$message({
                                   message: data.msg,
                                   type: 'success'
                               });
                               this.$router.back();
                           }
                           if (data.status == 500) {
                               this.$message({
                                   message: data.msg,
                                   type: 'error'
                               });
                           }
                       })
                    }
                }) 
            },
            handleClickAdd() {
                this.params.licenceData.contactDatas.push({
                    age: "",
                    trueName: "",
                    position: "",
                    introduction: "",
                })
            },
            handleChange(val) {
                val.map( (item, index)=> {
                    if (index == 0) {
                        this.params.coreData.firstIndustry = item
                    }
                    if (index == 1) {
                        this.params.coreData.secondIndustry = item
                    }
                    if (index == 2) {
                        this.params.coreData.thirdIndustry = item
                    }
                })
            },
            handleChangeChannel(val) {
                let filter = this.channelList.filter( item => {
                    return item.channelCode == val
                })[0]
                this.params.baseData = {
                    parentChannelCode: filter.channelCode,
                    userId: filter.userId
                }
            },
            showMarquee:function (num) {
                if (!this.messageList[0]) return
                this.messageList.push(this.messageList[0]);
                var max = this.messageList.length;
                var that = this;
                let marqueetimer =  setInterval(function(){
                    num++;
                    if(num>=max ){
                        num=0;
                    }
                    that.num=num*30;
                }, 2000);
            }
        }
    }
</script>

<style lang="scss">
    .message {
        display: block;
        position: relative;
        width: 60%;
        height: 30px;/*关键样式*/
        overflow: hidden;
    }
    .marquee_list{
        display: block;
        position: absolute;
        top:0;
        left: 0;
    }
    .marquee_top{transition: top 0.5s ;}/*关键样式*/
    .marquee_list li{
        height: 30px;/*关键样式*/
        line-height: 30px;/*关键样式*/
        font-size: 14px;
        padding-left: 20px;
        background-color: #fff;
        a {
            color: #333;
        }
    }
    .container {
        .mb30 {
            margin-bottom: 30px;
        }
        .whiteSpace {
            white-space: nowrap;
        }
        .whiteSpace.address-input{
            display: block;
            .distpicker-address-wrapper{
                display: inline-block;
                margin-bottom: 20px;
            }
            .el-input{
                display: block;
                width: 80%;
                margin-left: 75px;
            }
        }
        .company-primary-detail-edit {
            .avatar-uploader .el-upload {
                width: 306px;
                height: 227px;
                /*border: 1px dashed #d9d9d9;*/
                border-radius: 6px;
                cursor: pointer;
                position: relative;
                overflow: hidden;
            }
            .avatar-uploader .el-upload:hover {
                border-color: #409EFF;
            }
            .avatar-uploader-icon {
                font-size: 28px;
                color: #8c939d;
                width: 306px;
                text-align: center;
            }
            .avatar {
                width: 100%;
                height: 100%;
                /*height: 178px;*/
                display: block;
            }
            header {
                margin: 19px 0;
                font-size: 14px;
                color: #333;
                a {
                    color: #999;
                }
            }
            .focus-pointer {
                font-size: 14px;
                height: 70px;
                line-height: 70px;
                background-color: #fff;
                padding-left: 18px;
                white-space: nowrap;
            }
            .detail-display {
                background-color: #fff;
                padding: 23px;
                .head-sec {
                    padding-bottom: 8px;
                    border-bottom: 1px solid #e1e1e1;
                }
            }
            .top-manager {
                margin-bottom: 20px;
                span {
                    width: 80px;
                    display: inline-block;
                }
            }
        }

    }
</style>
